// import { ref, watch, computed, onMounted } from Vue
// import { defineAsyncComponent, watch, computed, onMounted } from Vue

import { productList } from '../data/index.js'
export default {
  name: 'Product',
  template: '',
  components: {
    InfoItem: Vue.defineAsyncComponent(() => myImport('components/InfoItem'))
  },
  setup () {
    const data = Vue.reactive({
      filterList: productList,
      resouspan:['慕茹姬','氨基酸洁面慕斯','慕茹姬医用冷敷贴面膜','慕茹姬富勒烯虫草奢养面膜']
    });
    const filterText = Vue.ref('')
    const type = Vue.ref(2)
    const search = (val) => {
      filterText.value = val
      // console.log('search',filterText)
    }
    Vue.watch(filterText, (val) => {
      data.filterList =  productList.filter((item)=>{
        let reg= new RegExp(val,'i');
        return reg.test(item.title);
      });
    })

    Vue.onBeforeMount(() => {
      const useRouter = VueRouter.useRouter().currentRoute.value
      console.log(useRouter)
    });

    Vue.onMounted( () => {
      console.log('onMounted')
    });
    return {
      ...Vue.toRefs(data),
      filterText,
      productList,
      type,
      search
    }
  }
}
